<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="../common.css" />
	<style type="text/css">
		body {
			background: #222;
			overflow: hidden;
		}

		:root {
			/* --color: orange; */
			--color: rgba(255, 165, 0, 1);
		}

		.loading {
			position: relative;
			width: 8rem;
			height: 8rem;
			-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
			-webkit-perspective: 40rem;
			perspective: 40rem;
			pointer-events: none;
			margin-bottom: 40px;
		}

		.loading .line {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border-radius: 50%;
			border-bottom: 0.15rem solid var(--color);
		}


		.loading .line:first-child {
			-webkit-animation: rotate1 1.15s linear infinite;
			animation: rotate1 1.15s linear infinite;
		}


		.loading .line:nth-child(2) {
			-webkit-animation: rotate2 1.15s linear infinite;
			animation: rotate2 1.15s linear infinite
		}

		.loading .line:nth-child(3) {
			-webkit-animation: rotate3 1.15s linear infinite;
			animation: rotate3 1.15s linear infinite
		}

		.loading .line:first-child {
			-webkit-animation-delay: -.8s;
			animation-delay: -.8s;
		}


		.loading .line:nth-child(2) {
			-webkit-animation-delay: -.4s;
			animation-delay: -.4s
		}

		.loading .line:nth-child(3) {
			-webkit-animation-delay: 0s;
			animation-delay: 0s
		}

		@-webkit-keyframes rotate1 {
			0% {
				-webkit-transform: rotateX(35deg) rotateY(-45deg) rotate(0);
				transform: rotateX(35deg) rotateY(-45deg) rotate(0)
			}

			to {
				-webkit-transform: rotateX(35deg) rotateY(-45deg) rotate(1turn);
				transform: rotateX(35deg) rotateY(-45deg) rotate(1turn)
			}
		}

		@keyframes rotate1 {
			0% {
				-webkit-transform: rotateX(35deg) rotateY(-45deg) rotate(0);
				transform: rotateX(35deg) rotateY(-45deg) rotate(0)
			}

			to {
				-webkit-transform: rotateX(35deg) rotateY(-45deg) rotate(1turn);
				transform: rotateX(35deg) rotateY(-45deg) rotate(1turn)
			}
		}

		@-webkit-keyframes rotate2 {
			0% {
				-webkit-transform: rotateX(50deg) rotateY(10deg) rotate(0);
				transform: rotateX(50deg) rotateY(10deg) rotate(0)
			}

			to {
				-webkit-transform: rotateX(50deg) rotateY(10deg) rotate(1turn);
				transform: rotateX(50deg) rotateY(10deg) rotate(1turn)
			}
		}

		@keyframes rotate2 {
			0% {
				-webkit-transform: rotateX(50deg) rotateY(10deg) rotate(0);
				transform: rotateX(50deg) rotateY(10deg) rotate(0)
			}

			to {
				-webkit-transform: rotateX(50deg) rotateY(10deg) rotate(1turn);
				transform: rotateX(50deg) rotateY(10deg) rotate(1turn)
			}
		}

		@-webkit-keyframes rotate3 {
			0% {
				-webkit-transform: rotateX(35deg) rotateY(55deg) rotate(0);
				transform: rotateX(35deg) rotateY(55deg) rotate(0)
			}

			to {
				-webkit-transform: rotateX(35deg) rotateY(55deg) rotate(1turn);
				transform: rotateX(35deg) rotateY(55deg) rotate(1turn)
			}
		}

		@keyframes rotate3 {
			0% {
				-webkit-transform: rotateX(35deg) rotateY(55deg) rotate(0);
				transform: rotateX(35deg) rotateY(55deg) rotate(0)
			}

			to {
				-webkit-transform: rotateX(35deg) rotateY(55deg) rotate(1turn);
				transform: rotateX(35deg) rotateY(55deg) rotate(1turn)
			}
		}

		/* 第二个 */
		.loading2 .line2 {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border-radius: 50%;
			border-bottom: 0.1rem solid var(--color);
			border-top: 0.1rem solid var(--color);
		}

		.loading2 .line2:first-child {
			-webkit-animation: rotate4 1.15s linear infinite;
			animation: rotate4 1.15s linear infinite;
		}

		.loading2 .line2:nth-child(2) {
			-webkit-animation: rotate5 1.15s linear infinite;
			animation: rotate5 1.15s linear infinite
		}

		@keyframes rotate4 {
			0% {
				-webkit-transform: rotateX(55deg) rotateY(-30deg) rotate(0);
				transform: rotateX(55deg) rotateY(-30deg) rotate(0)
			}

			to {
				-webkit-transform: rotateX(55deg) rotateY(-30deg) rotate(1turn);
				transform: rotateX(55deg) rotateY(-30deg) rotate(1turn)
			}
		}

		@keyframes rotate5 {
			0% {
				-webkit-transform: rotateX(55deg) rotateY(30deg) rotate(0);
				transform: rotateX(55deg) rotateY(30deg) rotate(0)
			}

			to {
				-webkit-transform: rotateX(55deg) rotateY(30deg) rotate(1turn);
				transform: rotateX(55deg) rotateY(30deg) rotate(1turn)
			}
		}

		/* .loading3 {
			position: relative;
			width: 8rem;
			height: 8rem;
			-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
			-webkit-perspective: 40rem;
			perspective: 40rem;
			pointer-events: none;
			margin-top: 40px;
		}

		.loading3 .line1 {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border-radius: 50%;
			border-bottom: 0.1rem solid var(--color);
			transform: rotateX(55deg) rotateY(30deg);
		}

		.loading3 .line2 {
			position: absolute;
			top: 0%;
			left: 25%;
			width: 70%;
			height: 70%;
			border-radius: 50%;
			border-top: 0.1rem solid var(--color);
			transform: rotateX(55deg) rotateY(30deg);
		}

		.loading3 .line3 {
			position: absolute;
			bottom: -10%;
			left: 0%;
			width: 70%;
			height: 70%;
			border-radius: 50%;
			border-bottom: 0.1rem solid var(--color);
			transform: rotateX(55deg) rotateY(30deg);
		} */
	</style>
	<body>
		<section>
			<div class="loading">
				<div class="line"></div>
				<div class="line"></div>
				<div class="line"></div>
			</div>
			<div class="loading loading2">
				<div class="line2"></div>
				<div class="line2"></div>
			</div>
			<!-- <div class="loading3">
				<div class="line1"></div>
				<div class="line2"></div>
				<div class="line3"></div>
			</div> -->
		</section>

	</body>
</html>
